<template>
  <div class="app-container">
    <transition name="el-zoom-in-top">
      <el-form v-show="show" ref="form" :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="任务名称">
          <el-input v-model="form.jobName" placeholder="任务名称" clearable />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="form.createTime"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-close" plain @click="handleClearSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>
    <el-row class="g-row">
      <template>
        <el-popconfirm title="确定删除吗？" @confirm="handleDelete(selectedList)">
          <el-button slot="reference" icon="el-icon-delete" type="danger" plain :disabled="selectedList.length === 0">删除</el-button>
        </el-popconfirm>
      </template>
      <el-button icon="el-icon-plus" type="primary" plain @click="handleOpenDialog()">新填</el-button>
      <el-button type="info" icon="el-icon-tickets" plain @click="handleOpenLogDialog">日志</el-button>
      <div style="float: right">
        <el-button icon="el-icon-sort" plain @click="show = !show">查询条件</el-button>
        <el-button icon="el-icon-refresh-left" plain @click="loadList(page.currentPage,page.size)">刷新</el-button>
      </div>
    </el-row>
    <el-row class="g-row">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        @selection-change="selectedChange"
      >
        <el-table-column fixed="left" type="selection" width="55" />
        <el-table-column type="index" width="55" />
        <el-table-column prop="jobName" label="定时器名称" width="150" />
        <el-table-column prop="beanName" label="Bean名称" width="150" />
        <el-table-column prop="methodName" label="方法名称" width="170" />
        <el-table-column prop="params" label="参数" show-overflow-tooltip width="170" />
        <el-table-column prop="cronExpression" label="cron表达式" width="170" />
        <el-table-column prop="description" label="描述" show-overflow-tooltip width="170" />
        <el-table-column prop="status" label="状态" width="70" align="center">
          <template v-slot="scope">
            <el-tag v-if="scope.row.pause" type="danger">停止</el-tag>
            <el-tag v-else type="success">开始</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="140" align="center" />
        <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template v-slot="scope">
            <el-button v-if="scope.row.pause" type="text" class="g-button" @click="handleResumeJob(scope.row)">开始</el-button>
            <el-button v-else type="text" class="g-button" @click="handlePauseJob(scope.row)">停止</el-button>
            <el-button type="text" class="g-button" @click="handleRunJob(scope.row)">执行</el-button>
            <el-button type="text" class="g-button" @click="handleOpenDialog(scope.row)">修改</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
              <el-button slot="reference" type="text" class="g-button">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="g-row">
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="handleCloseDialog"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      append-to-body
      width="730px"
    >
      <el-form ref="dialogForm" :inline="true" :model="dialogForm" :rules="dialogFormRules" size="small" label-width="100px">
        <el-form-item label="任务名称" prop="jobName">
          <el-input v-model="dialogForm.jobName" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="任务描述" prop="description">
          <el-input v-model="dialogForm.description" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="Bean名称" prop="beanName">
          <el-input v-model="dialogForm.beanName" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="执行方法" prop="methodName">
          <el-input v-model="dialogForm.methodName" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="Cron表达式" prop="cronExpression">
          <el-input v-model="dialogForm.cronExpression" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="任务状态">
          <el-radio-group v-model="dialogForm.pause" style="width: 220px">
            <el-radio :label="false">启用</el-radio>
            <el-radio :label="true">暂停</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="参数内容">
          <el-input v-model="dialogForm.params" style="width: 556px;" rows="4" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>
    <SchedulerLog ref="schedulerLog" />
  </div>
</template>

<script>

import SchedulerApi from '@/api/system/scheduler'
import SchedulerLog from '../scheduler/SchedulerLog'

export default {
  name: 'Scheduler',
  components: { SchedulerLog },
  data() {
    return {
      loading: true,
      dialog: {
        visible: false,
        title: ''
      },
      show: true,
      page: {
        currentPage: 1,
        size: 10,
        total: 10
      },
      form: {
        jobName: '',
        createTime: []
      },
      tableData: [],
      dialogForm: {
        id: '',
        jobName: '',
        description: '',
        beanName: '',
        methodName: '',
        cronExpression: '',
        pause: false,
        params: ''
      },
      // 选中的值显示
      selectedList: [],
      dialogFormRules: {
        jobName: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        beanName: [
          { required: true, message: '请输入Bean名称', trigger: 'blur' }
        ],
        methodName: [
          { required: true, message: '请输入执行方法', trigger: 'blur' }
        ],
        cronExpression: [
          { required: true, message: '请输入Cron表达式', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadList(this.page.currentPage, this.page.size)
  },
  methods: {
    loadList(page, size) {
      this.loading = true
      SchedulerApi.listJobByPage(JSON.parse(JSON.stringify(this.form)), page, size).then(res => {
        this.loading = false
        this.page.currentPage = res.data.currentPage
        this.page.size = res.data.size
        this.page.total = res.data.total
        this.tableData = res.data.records
      })
    },
    selectedChange(selectedList) {
      this.selectedList = JSON.parse(JSON.stringify(selectedList))
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.loadList(this.page.currentPage, val)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.loadList(val, this.page.size)
    },
    handleDelete(data) {
      const ids = []
      if (data.id) {
        ids.push(data.id)
      } else {
        data.map(d => {
          ids.push(d.id)
        })
      }
      SchedulerApi.deleteJob(ids).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.loadList(this.page.currentPage, this.page.size)
      })
    },
    handleSearch() {
      this.loadList(this.page.currentPage, this.page.size)
      this.$message.success('查询成功')
    },
    handleClearSearch() {
      this.form = {
        logType: '',
        createTime: []
      }
    },
    handleOpenDialog(row) {
      this.dialog.visible = true
      if (row) {
        this.dialog.title = '编辑'
        this.dialogForm = JSON.parse(JSON.stringify(row))
      } else {
        this.dialog.title = '新增'
      }
    },
    handleCloseDialog() {
      this.dialogForm = {
        id: '',
        jobName: '',
        description: '',
        beanName: '',
        methodName: '',
        cronExpression: '',
        pause: false,
        params: ''
      }
      this.dialog.visible = false
      this.$refs.dialogForm.clearValidate()
    },
    handleSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogForm.id) {
            SchedulerApi.updateJob(this.dialogForm).then(res => {
              this.$message.success('修改成功')
              this.handleCloseDialog()
              this.loadList(this.page.currentPage, this.page.size)
            })
          } else {
            SchedulerApi.saveJob(this.dialogForm).then(res => {
              this.$message.success('新增成功')
              this.handleCloseDialog()
              this.loadList(this.page.currentPage, this.page.size)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleRunJob(data) {
      SchedulerApi.runJob(data.id).then(res => {
        this.$message.success('执行成功')
        this.loadList(this.page.currentPage, this.page.size)
      })
    },
    handlePauseJob(data) {
      SchedulerApi.pauseJob(data.id).then(res => {
        this.$message.success('暂停成功')
        this.loadList(this.page.currentPage, this.page.size)
      })
    },
    handleResumeJob(data) {
      SchedulerApi.resumeJob(data.id).then(res => {
        this.$message.success('恢复成功')
        this.loadList(this.page.currentPage, this.page.size)
      })
    },
    handleOpenLogDialog() {
      this.$refs.schedulerLog.open()
    }
  }
}
</script>

<style scoped>
.g-row{
  margin-top: 10px;
}
.g-button{
  margin: 0;
  padding: 0;
  width: 40px
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 70px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.demo-table-expand .el-form-item__content {
  font-size: 12px;
}
</style>
